<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
		<meta content="telephone=no" name="format-detection" />
        <meta name="browsermode" content="application">
        <meta name="x5-page-mode" content="app">
<title></title>
		<link rel="stylesheet" href="assets/css/jquery.mobile-1.4.5.css">
		<link rel="stylesheet" href="assets/css/mui.min.css" />
		<script src="assets/js/jquery-2.0.3.min.js"></script>
		<script src="assets/js/jquery.mobile-1.4.5.js"></script>
		<script src="assets/js/mui.min.js"></script>
		<script>
			mui.init();
		</script>

		<style>
			.body_style {
				background: #CCCCCC;
				height: 1080px;
			}
			
			.menu_style {
				width: 100%;
			}
			
			.clean-margin {
				padding: 0;
				margin: 0;
			}
			
			#scroll-1::-webkit-scrollbar {
				width: 3px;
			}
			
			#scroll-1::-webkit-scrollbar-button {
				height: 0;
			}
			
			#scroll-1::-webkit-scrollbar-track {
				background: #999;
			}
			
			#scroll-1::-webkit-scrollbar-thumb {
				background: #ccc;
				border-radius: 4px;
			}
		</style>
	</head>

	<body class="body_style">
		<!--
        	第一页
        -->
		<div data-role="page" id="page1">
			<div data-role="panel" id="myPanel1">
				<div data-role="navbar">
					<ul>
						<li class="menu_style" style="width: 100%;">
							<a href="#page1" class="ui-btn-active ui-icon-home ui-state-persist ui-btn-icon-left" data-transition="flow">UI测试</a>
						</li>
						<li class="menu_style" style="width: 100%;">
							<a href="#page2" class="ui-icon-home ui-btn-icon-left" data-transition="flip">尺寸测试</a>
						</li>
						<li class="menu_style" style="width: 100%;">
							<a href="#page3" class="ui-icon-home ui-btn-icon-left" data-transition="flip">事件测试</a>
						</li>
						<li class="menu_style" style="width: 100%;">
							<a href="#page3" onclick="$('#iframe').attr('src','weather.html')" class="ui-icon-home ui-btn-icon-left" data-transition="flip">天气</a>
						</li>
					</ul>
				</div>
			</div>
			<div data-role="main" class="ui-content">
				<div class="mui-bar mui-bar-nav">
					<a class="mui-icon mui-icon-bars mui-pull-left" href="#myPanel1"></a>
					<h1 class="mui-title">UI测试</h1>
				</div>
				<div style="width: 100%;height: 40px;"></div>
				轮播及事件测试
				<div id="slider" class="mui-slider">
					<div class="mui-slider-group mui-slider-loop">
						<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img src="assets/img/2.jpg">
							</a>
						</div>
						<!-- 第一张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="assets/img/1.jpg">
							</a>
						</div>
						<!-- 第二张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="assets/img/2.jpg">
							</a>
						</div>
						<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img src="assets/img/1.jpg">
							</a>
						</div>
					</div>
					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
					</div>
				</div>
				9宫格测试
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-home"></span>
							<div class="mui-media-body">1</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
							<div class="mui-media-body">2</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-chatbubble"></span>
							<div class="mui-media-body">3</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-location"></span>
							<div class="mui-media-body">4</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-search"></span>
							<div class="mui-media-body">5</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-phone"></span>
							<div class="mui-media-body">6</div>
						</a>
					</li>
				</ul>
				区域滚动
				<div id="scroll-1" style="height: 300px;width: 100%;background: lightgray;overflow-y:scroll;">
					<div style="width: 100%;height: 200px;background: yellow;"></div>
					<div style="width: 100%;height: 200px;background: burlywood;"></div>
					<div style="width: 100%;height: 200px;background: greenyellow;"></div>
				</div>
				面板 
				<ul class="mui-table-view">
				    <li class="mui-table-view-cell mui-collapse">
				        <a class="mui-navigate-right" href="#">面板1</a>
				        <div class="mui-collapse-content">
				            <p>面板1子内容</p>
				        </div>
				    </li>
				    <li class="mui-table-view-cell mui-collapse">
				        <a class="mui-navigate-right" href="#">面板</a>
				            <div class="mui-collapse-content">
				            <p>面板2子内容</p>
				        </div>
				    </li>
				    <li class="mui-table-view-cell mui-collapse">
				        <a class="mui-navigate-right" href="#">面板3</a>
				        <div class="mui-collapse-content">
				            <p>面板3子内容</p>
				        </div>
				    </li>
				</ul>
				
				选项
				<nav class="mui-bar mui-bar-tab">
				    <a class="mui-tab-item mui-active">
				        <span class="mui-icon mui-icon-home"></span>
				        <span class="mui-tab-label">1</span>
				    </a>
				    <a class="mui-tab-item">
				        <span class="mui-icon mui-icon-phone"></span>
				        <span class="mui-tab-label">2</span>
				    </a>
				    <a class="mui-tab-item">
				        <span class="mui-icon mui-icon-email"></span>
				        <span class="mui-tab-label">3</span>
				    </a>
				    <a class="mui-tab-item">
				        <span class="mui-icon mui-icon-gear"></span>
				        <span class="mui-tab-label">4</span>
				    </a>
				</nav>

			</div>
		</div>
		<!--
        	第2页
       -->
		<div data-role="page" id="page2">
			<div data-role="panel" id="myPanel2">
				<div data-role="navbar">
					<ul>
						<li class="menu_style" style="width: 100%;">
							<a href="#page1" class="ui-btn-active ui-icon-home ui-state-persist ui-btn-icon-left" data-transition="flow">UI测试</a>
						</li>
						<li class="menu_style" style="width: 100%;">
							<a href="#page2" class="ui-icon-home ui-btn-icon-left" data-transition="flip">尺寸测试</a>
						</li>
						<li class="menu_style" style="width: 100%;">
							<a href="#page3" onclick="$('#iframe').attr('src','set.html')" class="ui-icon-home ui-btn-icon-left" data-transition="flip">事件测试</a>
						</li>
						<li class="menu_style" style="width: 100%;">
							<a href="#page3" onclick="$('#iframe').attr('src','weather.html')" class="ui-icon-home ui-btn-icon-left" data-transition="flip">天气</a>
						</li>
					</ul>
				</div>
			</div>
			<div data-role="main" class="ui-content">
				<div class="mui-bar mui-bar-nav">
					<a class="mui-icon mui-icon-bars mui-pull-left" href="#myPanel2"></a>
					<h1 class="mui-title">尺寸测试</h1>
				</div>
				<div style="width: 100%;height: 40px;"></div>
				    <font style="font-size: 25vm;">25单位</font>
				    <div style="background: dodgerblue;width: 25vw;height: 1vw;"></div>
                    50单位
				    <div style="background: dodgerblue;width: 50vw;height: 1vw;"></div>
				    50单位
				    <div style="background: dodgerblue;width: 75vw;height: 1vw;"></div>
				    50px
				    <div style="background: dodgerblue;width: 50px;height: 10px;"></div>
				    200px
				    <div style="background: dodgerblue;width: 200px;height: 10px;"></div>
				    500px
				    <div style="background: dodgerblue;width: 500px;height: 10px;"></div>
				    25rem.1/100
				    <div style="background: dodgerblue;width: 25rem;height: 10px;"></div>
				    50rem
				    <div style="background: dodgerblue;width: 50rem;height: 10px;"></div>
				    75rem
				    <div style="background: dodgerblue;width: 75rem;height: 10px;"></div>
				    <p style="font-size: 1rem;">1rem</p>
				    <p style="font-size: 2rem;">2rem</p>
				    <p style="font-size: 5rem;">5rem</p>
				    <p style="font-size: 10rem;">10rem</p>
				    <p style="font-size: 10px;">10px</p>
				    <p style="font-size: 20px;">20px</p>
				    <p style="font-size: 30px;">30px</p>
				    <p style="font-size: 40px;">40px</p>
				    <br />
				    50单位
				     <div style="background: dodgerblue;width:5vw;height: 30vw;"></div>  
				<div id="blue"></div>
			</div>
		</div>
        <!--
        	第3页
        -->
		<div data-role="page" id="page3">
			<div data-role="panel" id="myPanel3">
				<div data-role="navbar">
					<ul>
						<li class="menu_style" style="width: 100%;">
							<a href="#page1" class="ui-btn-active ui-icon-home ui-state-persist ui-btn-icon-left" data-transition="flow">UI测试</a>
						</li>
						<li class="menu_style" style="width: 100%;">
							<a href="#page2" class="ui-icon-home ui-btn-icon-left" data-transition="flip">尺寸测试</a>
						</li>
						<li class="menu_style" style="width: 100%;">
							<a href="#page3" onclick="$('#iframe').attr('src','set.html')" class="ui-icon-home ui-btn-icon-left" data-transition="flip">事件测试</a>
						</li>
						<li class="menu_style" style="width: 100%;">
							<a href="#page3" onclick="$('#iframe').attr('src','weather.html')" class="ui-icon-home ui-btn-icon-left" data-transition="flip">天气</a>
						</li>
					</ul>
				</div>
			</div>
			
			<div data-role="main" class="ui-content" style="margin: 0;padding: 0;">
				<div class="mui-bar mui-bar-nav">
					<a class="mui-icon mui-icon-bars mui-pull-left" href="#myPanel3"></a>
					<h1 class="mui-title">事件测试</h1>
				</div>
				<div style="width: 100%;height: 40px;"></div>
				<iframe id="iframe" src="set.html" style="width: 100%;height: 100%;border: 0;"></iframe>

			</div>
      </div>
      
			<script>
				mui.init();
				mui('.mui-scroll-wrapper').scroll({
					deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
				});
				$(function(){
					document.documentElement.style.fontSize = 1*(document.documentElement.clientWidth) / 100+'px';
					
					
				});
			</script>
			<script>
				$(document).on("pagecreate", "#pageone", function() {
					$(".page1").on("tap", function() {
						$(this).hide();
						$("#red").css("height", "290px")
						$("#red").css("width", "290px")
						$("#red").css("background", "red")
					});
					$("#red").on("tap", function() {
						$("#red").html("123")
					});
				});
				$(document).on("pagecreate", "#pagetwo", function() {
					$(".page2").on("tap", function() {
						$(this).hide();
						$("#blue").css("height", "290px")
						$("#blue").css("width", "290px")
						$("#blue").css("background", "blueviolet")
					});
					$("#blue").on("tap", function() {
						$("#blue").html("321")
					});
				});

				$("iframe").css("height", document.body.clientHeight - 42)
			</script>
			<script>
                 function launchFullScreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}
	launchFullScreen(document.documentElement);
			</script>
	</body>

</html>

